import React, { useState } from 'react';
import { 
  Leaf, Target, ArrowRight, CheckCircle, Clock, AlertTriangle,
  BarChart3, Calculator, Globe, Factory, Truck, Workflow
} from 'lucide-react';

const CarbonFootprintUserScenarios = ({ onNavigate }) => {
  const [activeScenario, setActiveScenario] = useState('overview');

  // 用户角色定义
  const userRoles = [
    {
      id: 'carbon-manager',
      name: '碳管理专员',
      description: '负责企业整体碳排放管理和减排策略制定',
      responsibilities: ['碳排放策略制定', '减排目标设定', '进度监控', '团队协调'],
      pain_points: ['数据收集困难', '计算方法复杂', '目标跟踪缺乏工具', '跨部门协调难'],
      goals: ['制定科学减排目标', '建立碳管理体系', '提高数据准确性', '实现碳中和目标']
    },
    {
      id: 'environmental-analyst',
      name: '环境数据分析师',
      description: '专注于碳排放数据收集、计算和分析',
      responsibilities: ['数据收集', '排放计算', '趋势分析', '报告制作'],
      pain_points: ['数据源分散', '计算标准不统一', '手工计算易错', '报告制作耗时'],
      goals: ['自动化数据收集', '标准化计算流程', '实时监控排放', '提高分析效率']
    },
    {
      id: 'sustainability-director',
      name: '可持续发展总监',
      description: '制定企业可持续发展战略和碳中和路径',
      responsibilities: ['战略规划', '政策制定', '目标设定', '对外沟通'],
      pain_points: ['缺乏数据支撑', '目标设定依据不足', '进度可视化不够', '对外披露压力'],
      goals: ['数据驱动决策', '科学制定路径', '透明化管理', '提升企业形象']
    },
    {
      id: 'compliance-officer',
      name: '合规专员',
      description: '确保碳排放管理符合法规和标准要求',
      responsibilities: ['法规跟踪', '合规审核', '第三方验证', '披露管理'],
      pain_points: ['法规更新频繁', '标准差异复杂', '验证流程繁琐', '披露要求多样'],
      goals: ['自动化合规检查', '标准化验证流程', '简化披露操作', '降低合规风险']
    }
  ];

  // 核心用户场景
  const coreScenarios = [
    {
      id: 'data-collection',
      title: '碳排放数据收集与管理',
      description: '建立完整的碳排放数据收集体系，涵盖直接排放和间接排放',
      user_story: '作为环境数据分析师，我希望能够系统化地收集和管理企业各类碳排放数据，以便准确计算企业碳足迹',
      acceptance_criteria: [
        '支持多种数据源接入（能源账单、生产数据、交通记录等）',
        '提供标准化的数据录入模板',
        '支持批量数据导入和实时数据同步',
        '具备数据质量检查和异常识别功能',
        '记录完整的数据来源和变更历史'
      ],
      business_value: '提高数据收集效率70%，减少数据错误率85%',
      priority: 'P0',
      effort: '15人天'
    },
    {
      id: 'carbon-calculation',
      title: '碳足迹计算与分析',
      description: '基于国际标准和排放因子库进行精确的碳足迹计算',
      user_story: '作为碳管理专员，我希望系统能够自动计算企业碳足迹，并提供多维度分析，以便制定有效的减排策略',
      acceptance_criteria: [
        '支持GHG Protocol、ISO 14064等国际标准',
        '内置最新的排放因子数据库',
        '提供范围一、二、三的分类计算',
        '支持产品生命周期碳足迹计算',
        '提供多维度分析报告（按部门、产品、时间等）'
      ],
      business_value: '提高计算精度95%，减少计算时间60%',
      priority: 'P0',
      effort: '20人天'
    },
    {
      id: 'target-management',
      title: '减排目标设定与跟踪',
      description: '科学设定减排目标，实时跟踪减排进度和效果',
      user_story: '作为可持续发展总监，我希望能够设定科学的减排目标，并实时跟踪进度，以确保实现碳中和承诺',
      acceptance_criteria: [
        '支持SBTi科学减排目标设定',
        '提供情景分析和路径规划',
        '实时跟踪减排进度和达成率',
        '支持减排措施效果评估',
        '提供预警和建议功能'
      ],
      business_value: '提高目标达成率40%，优化减排投资回报率30%',
      priority: 'P1',
      effort: '18人天'
    },
    {
      id: 'supply-chain',
      title: '供应链碳足迹管理',
      description: '扩展到供应链的碳足迹管理，实现全价值链碳中和',
      user_story: '作为碳管理专员，我希望能够管理供应链的碳排放，与供应商协作减排，实现全价值链的碳中和',
      acceptance_criteria: [
        '支持供应商碳排放数据收集',
        '提供供应商碳排放评估工具',
        '建立供应商减排合作机制',
        '支持供应链碳足迹可视化',
        '提供供应商碳排放绩效评价'
      ],
      business_value: '扩大碳管理覆盖范围80%，提升供应链减排效果50%',
      priority: 'P1',
      effort: '25人天'
    },
    {
      id: 'reporting-disclosure',
      title: '碳排放报告与披露',
      description: '自动生成符合各种标准和要求的碳排放报告',
      user_story: '作为合规专员，我希望系统能够自动生成各类碳排放报告，满足不同的披露要求，提高报告质量和效率',
      acceptance_criteria: [
        '支持多种报告标准（CDP、TCFD、SASB等）',
        '提供可定制的报告模板',
        '支持第三方验证数据导出',
        '具备报告审核和审批流程',
        '提供多格式报告输出和发布'
      ],
      business_value: '减少报告制作时间75%，提高报告质量和合规性',
      priority: 'P1',
      effort: '12人天'
    }
  ];

  // 业务流程场景
  const businessFlows = [
    {
      id: 'monthly-carbon-monitoring',
      title: '月度碳排放监控流程',
      description: '企业月度碳排放监控和分析的完整业务流程',
      steps: [
        {
          step: 1,
          title: '数据收集汇总',
          actor: 'environmental-analyst',
          description: '收集当月能源消耗、生产活动、交通出行等各类活动数据'
        },
        {
          step: 2,
          title: '数据质量检查',
          actor: 'environmental-analyst',
          description: '验证数据完整性和准确性，识别异常值并进行修正'
        },
        {
          step: 3,
          title: '碳排放计算',
          actor: 'system',
          description: '系统自动应用排放因子计算各类活动的碳排放量'
        },
        {
          step: 4,
          title: '结果分析审核',
          actor: 'carbon-manager',
          description: '分析碳排放趋势，识别异常变化，审核计算结果'
        },
        {
          step: 5,
          title: '月度报告生成',
          actor: 'system',
          description: '自动生成月度碳排放报告，包含关键指标和趋势分析'
        },
        {
          step: 6,
          title: '管理层汇报',
          actor: 'sustainability-director',
          description: '向管理层汇报月度碳排放情况和减排进展'
        }
      ]
    },
    {
      id: 'annual-carbon-reporting',
      title: '年度碳足迹报告流程',
      description: '企业年度碳足迹核算、验证和披露的完整流程',
      steps: [
        {
          step: 1,
          title: '年度数据汇总',
          actor: 'environmental-analyst',
          description: '汇总全年所有碳排放相关数据，确保数据完整性'
        },
        {
          step: 2,
          title: '碳足迹核算',
          actor: 'carbon-manager',
          description: '按照国际标准进行全面的企业碳足迹核算'
        },
        {
          step: 3,
          title: '内部审核',
          actor: 'compliance-officer',
          description: '进行内部审核，确保核算方法和结果的准确性'
        },
        {
          step: 4,
          title: '第三方验证',
          actor: 'external-verifier',
          description: '委托第三方机构进行独立验证，确保数据可信度'
        },
        {
          step: 5,
          title: '报告编制',
          actor: 'sustainability-director',
          description: '编制年度可持续发展报告，包含碳足迹信息'
        },
        {
          step: 6,
          title: '对外披露',
          actor: 'compliance-officer',
          description: '通过官网、CDP平台等渠道对外披露碳足迹信息'
        }
      ]
    }
  ];

  // 渲染用户角色
  const renderUserRoles = () => (
    <div className="space-y-6">
      <div className="text-center mb-8">
        <Leaf className="h-12 w-12 text-green-600 mx-auto mb-4" />
        <h2 className="text-3xl font-bold text-gray-900 mb-2">目标用户角色</h2>
        <p className="text-gray-600">碳足迹管理主要服务的用户群体及其需求分析</p>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {userRoles.map((role) => (
          <div key={role.id} className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
            <div className="flex items-center mb-4">
              <div className="p-3 bg-green-100 rounded-lg mr-4">
                <Leaf className="h-6 w-6 text-green-600" />
              </div>
              <div>
                <h3 className="text-xl font-semibold text-gray-900">{role.name}</h3>
                <p className="text-gray-600 text-sm">{role.description}</p>
              </div>
            </div>

            <div className="space-y-4">
              <div>
                <h4 className="font-medium text-gray-900 mb-2 flex items-center">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                  主要职责
                </h4>
                <ul className="space-y-1">
                  {role.responsibilities.map((resp, idx) => (
                    <li key={idx} className="text-sm text-gray-600 flex items-center">
                      <ArrowRight className="h-3 w-3 text-gray-400 mr-2" />
                      {resp}
                    </li>
                  ))}
                </ul>
              </div>

              <div>
                <h4 className="font-medium text-gray-900 mb-2 flex items-center">
                  <AlertTriangle className="h-4 w-4 text-yellow-500 mr-2" />
                  痛点问题
                </h4>
                <ul className="space-y-1">
                  {role.pain_points.map((pain, idx) => (
                    <li key={idx} className="text-sm text-gray-600 flex items-center">
                      <ArrowRight className="h-3 w-3 text-gray-400 mr-2" />
                      {pain}
                    </li>
                  ))}
                </ul>
              </div>

              <div>
                <h4 className="font-medium text-gray-900 mb-2 flex items-center">
                  <Target className="h-4 w-4 text-blue-500 mr-2" />
                  目标期望
                </h4>
                <ul className="space-y-1">
                  {role.goals.map((goal, idx) => (
                    <li key={idx} className="text-sm text-gray-600 flex items-center">
                      <ArrowRight className="h-3 w-3 text-gray-400 mr-2" />
                      {goal}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );

  // 渲染核心场景
  const renderCoreScenarios = () => (
    <div className="space-y-6">
      <div className="text-center mb-8">
        <Target className="h-12 w-12 text-blue-600 mx-auto mb-4" />
        <h2 className="text-3xl font-bold text-gray-900 mb-2">核心业务场景</h2>
        <p className="text-gray-600">碳足迹管理系统的关键功能场景和用户需求</p>
      </div>
      
      <div className="space-y-6">
        {coreScenarios.map((scenario) => (
          <div key={scenario.id} className="bg-white rounded-lg shadow-md p-6">
            <div className="flex items-start justify-between mb-4">
              <div className="flex-1">
                <h3 className="text-xl font-semibold text-gray-900 mb-2">{scenario.title}</h3>
                <p className="text-gray-600 mb-4">{scenario.description}</p>
                
                <div className="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4">
                  <h4 className="font-medium text-blue-900 mb-2">用户故事</h4>
                  <p className="text-blue-800 text-sm italic">"{scenario.user_story}"</p>
                </div>
              </div>
              
              <div className="flex items-center space-x-2 ml-4">
                <span className={`px-2 py-1 text-xs rounded-full ${
                  scenario.priority === 'P0' ? 'bg-red-100 text-red-800' : 'bg-orange-100 text-orange-800'
                }`}>
                  {scenario.priority}
                </span>
                <span className="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full">
                  {scenario.effort}
                </span>
              </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <div>
                <h4 className="font-medium text-gray-900 mb-3 flex items-center">
                  <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                  验收标准
                </h4>
                <ul className="space-y-2">
                  {scenario.acceptance_criteria.map((criteria, idx) => (
                    <li key={idx} className="flex items-start">
                      <CheckCircle className="h-4 w-4 text-green-500 mt-0.5 mr-2 flex-shrink-0" />
                      <span className="text-sm text-gray-600">{criteria}</span>
                    </li>
                  ))}
                </ul>
              </div>
              
              <div>
                <h4 className="font-medium text-gray-900 mb-3 flex items-center">
                  <BarChart3 className="h-4 w-4 text-purple-500 mr-2" />
                  商业价值
                </h4>
                <div className="bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg p-4">
                  <p className="text-purple-800 font-medium">{scenario.business_value}</p>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );

  // 渲染业务流程
  const renderBusinessFlows = () => (
    <div className="space-y-6">
      <div className="text-center mb-8">
        <Workflow className="h-12 w-12 text-purple-600 mx-auto mb-4" />
        <h2 className="text-3xl font-bold text-gray-900 mb-2">业务流程场景</h2>
        <p className="text-gray-600">关键业务流程的详细步骤和交互设计</p>
      </div>
      
      <div className="space-y-8">
        {businessFlows.map((flow) => (
          <div key={flow.id} className="bg-white rounded-lg shadow-md p-6">
            <h3 className="text-xl font-semibold text-gray-900 mb-6">{flow.title}</h3>
            <p className="text-gray-600 mb-6">{flow.description}</p>
            
            <div className="space-y-4">
              {flow.steps.map((step, idx) => (
                <div key={step.step} className="flex items-start">
                  <div className="flex flex-col items-center mr-4">
                    <div className="bg-green-600 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm font-semibold">
                      {step.step}
                    </div>
                    {idx < flow.steps.length - 1 && (
                      <div className="w-px h-8 bg-green-200 mt-2"></div>
                    )}
                  </div>
                  
                  <div className="flex-1 pb-4">
                    <div className="flex items-center justify-between mb-2">
                      <h4 className="font-medium text-gray-900">{step.title}</h4>
                      <span className={`px-2 py-1 text-xs rounded-full ${
                        step.actor === 'system' ? 'bg-gray-100 text-gray-800' :
                        step.actor === 'carbon-manager' ? 'bg-green-100 text-green-800' :
                        step.actor === 'environmental-analyst' ? 'bg-blue-100 text-blue-800' :
                        step.actor === 'sustainability-director' ? 'bg-purple-100 text-purple-800' :
                        step.actor === 'compliance-officer' ? 'bg-yellow-100 text-yellow-800' :
                        'bg-orange-100 text-orange-800'
                      }`}>
                        {step.actor === 'system' ? '系统' :
                         step.actor === 'carbon-manager' ? '碳管理专员' :
                         step.actor === 'environmental-analyst' ? '环境数据分析师' :
                         step.actor === 'sustainability-director' ? '可持续发展总监' :
                         step.actor === 'compliance-officer' ? '合规专员' : '第三方验证'}
                      </span>
                    </div>
                    <p className="text-gray-600 text-sm">{step.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );

  return (
    <div className="bg-gradient-to-br from-green-50 to-white min-h-screen">
      {/* 紧凑的标签导航 */}
      <div className="bg-white/80 backdrop-blur-sm shadow-sm border-b border-green-200/60">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <nav className="flex space-x-1 py-2">
            <button
              onClick={() => setActiveScenario('overview')}
              className={`flex items-center space-x-2 px-4 py-3 rounded-lg font-medium text-sm transition-all duration-200 ${
                activeScenario === 'overview'
                  ? 'bg-green-500 text-white shadow-md'
                  : 'text-gray-600 hover:bg-green-50 hover:text-green-600'
              }`}
            >
              <Leaf className="h-4 w-4" />
              <span>用户角色</span>
            </button>
            <button
              onClick={() => setActiveScenario('scenarios')}
              className={`flex items-center space-x-2 px-4 py-3 rounded-lg font-medium text-sm transition-all duration-200 ${
                activeScenario === 'scenarios'
                  ? 'bg-green-500 text-white shadow-md'
                  : 'text-gray-600 hover:bg-green-50 hover:text-green-600'
              }`}
            >
              <Target className="h-4 w-4" />
              <span>核心场景</span>
            </button>
            <button
              onClick={() => setActiveScenario('flows')}
              className={`flex items-center space-x-2 px-4 py-3 rounded-lg font-medium text-sm transition-all duration-200 ${
                activeScenario === 'flows'
                  ? 'bg-green-500 text-white shadow-md'
                  : 'text-gray-600 hover:bg-green-50 hover:text-green-600'
              }`}
            >
              <Workflow className="h-4 w-4" />
              <span>业务流程</span>
            </button>
          </nav>
        </div>
      </div>

      {/* 主内容区域 - 紧凑布局 */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {activeScenario === 'overview' && renderUserRoles()}
        {activeScenario === 'scenarios' && renderCoreScenarios()}
        {activeScenario === 'flows' && renderBusinessFlows()}
      </div>
    </div>
  );
};

export default CarbonFootprintUserScenarios; 